<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    textarea.form-control {
       height : 300px;
    }
</style>



<body>

<form class="push-msg-form" id="pushMsgForm">
    <div class="form-group row">
        <label for="topic" class="col-sm-1 col-form-label">主题</label>
        <div class="col-sm-10">
            <select   placeholder="主题"   class="form-control" id="topic">
                <option value="">主题</option>
                <option value="TNT_PROPERTY">TNT_PROPERTY</option>
                <option value="TNT_EVENT">TNT_EVENT</option>
                <option value="TNT_SERVICE">TNT_SERVICE</option>
                <option value="TNT_LOGIN">TNT_LOGIN</option>
                <option value="TNT_HEARTBEAT">TNT_HEARTBEAT</option>
            </select>
        </div>
    </div>

    <div class="form-group row">
        <label for="topic" class="col-sm-1 col-form-label">协议</label>
        <div class="col-sm-10">
            <select   placeholder="协议"   class="form-control" id="protocol">
                <option value="">协议</option>
                <option value="VERTX_BRIDGE">VERTX_BRIDGE</option>
                <option value="MQTT">MQTT</option>
            </select>
        </div>
    </div>

    <div class="form-group row  option-group" style="display: none">
        <label for="topic" class="col-sm-1 col-form-label option-label">选项</label>
        <div class="col-sm-10">
            <select   placeholder="选项" class="form-control" id="option">
            </select>
        </div>
    </div>


    <div class="form-group row">
        <label for="message" class="col-sm-1 col-form-label">消息</label>
        <div class="col-sm-10">
            <textarea   class="form-control" id="message"></textarea>
        </div>
    </div>
</form>

<script type="text/javascript">

    function pushMessageViewLoad(){
        $('#pushMsgForm #topic').selectpicker();
        $('#pushMsgForm #protocol').selectpicker();
        event();
    }

    function event() {
        $('#pushMsgForm #topic').on('change', function (e) {
            var deviceVal =  $("#deviceTemp").val();
            var param = JSON.parse(deviceVal);
            param.topic = $("#pushMsgForm #topic").val();
            $.ajax({
                type: "post",
                dataType: "json",
                data: param,
                url: '/device/template',
                success: function (response) {

                    optionBuild(response ? response.data : null);
                }
            });
        });

        $('#pushMsgForm #option').on('change', function (e) {
            var option =  $('#pushMsgForm #option option:selected');
            var result = option.data("value");
            result = result ? JSON.stringify(result,null,'\t') : "";
            $("#pushMsgForm #message").val(result);
        });
    }

    function optionBuild(result) {
       var topic =  $("#pushMsgForm #topic").val();
       if(topic == 'TNT_LOGIN' || topic == 'TNT_HEARTBEAT' || topic == 'TNT_PROPERTY'){
           $("#pushMsgForm .option-group").hide();
           var result = result ? JSON.stringify(JSON.parse(result),null,'\t') : "";
           $("#pushMsgForm #message").val(result);
       }else if(topic == 'TNT_EVENT' || topic == 'TNT_SERVICE'){

           $("#pushMsgForm #option").html("");
           $("#pushMsgForm #message").val("");
           $("#pushMsgForm #option").selectpicker("destroy");

           var label  = (topic == 'TNT_EVENT' ? '事件' : '服务');
           $("#pushMsgForm .option-label").text(label);
           $("#pushMsgForm #option").append("<option value=''>"+label+"</option>");

           result = JSON.parse(result);
           for(var key in result){
               var option = $("<option value='"+key+"'>"+result[key].name+"("+key+")</option>");
               option.data("value",result[key].template);
               $("#pushMsgForm #option").append(option);
           }
           $("#pushMsgForm #option").selectpicker();
           $("#pushMsgForm .option-group").show();
       }
    }
</script>

</body>
</html>